<template>
	<view>
		<z-paging ref="paging" v-model="infoList" @query="queryList">
			<view slot="top">
				<view class="line"></view>
				<view class="timebg">
					<picker class="timetxt" mode="date" :value="date" :start="startDate" :end="endDate" fields="year"
						@change="bindDateChange">
						<view style="display: flex;align-items: center;">{{date}}
							<image src="@/static/sanjiao.png" class="sanjiao"></image>
						</view>
					</picker>

					<view class="timetxt">
						<select-lay class="select-lay" :value="quarterValue" slabel="type" svalue="typeid"
							:placeholder="placeholder" :showplaceholder="false" :options="quarterArr"
							@selectitem="quarterselectitem"></select-lay>
					</view>
				</view>
			</view>

			<view>
				<view class="plan_bg">
				</view>
				<view class="bg_view">
					<text class="address">{{address}}</text>
					<view class="view" style="margin-top: 28rpx;">
						<view class="circle"></view>
						<text class="view_title">节水代码：</text>
						<text class="view_data">{{jsdm}}</text>
					</view>
					<view class="view">
						<view class="circle"></view>
						<text class="view_title">所属区县：</text>
						<text class="view_data">{{quarter}}</text>
					</view>

				</view>

				<view style="width: 100%;margin-top: -125rpx;">
					<view class="view_list" v-for="item in infoList">
						<view style="display: flex;flex-direction: row;">
							<image src="@/static/service_2.png" style="width: 64rpx;height: 64rpx;margin-top: 6rpx;">
							</image>
							<view style="display: flex;flex-direction: column;margin-left: 17rpx;">
								<text class="itemtitle">{{item.ysxzName}}</text>
								<text class="itemaddress">{{address}}</text>
							</view>
						</view>
						<view class="monthlist">
							<view v-for="i in 12" class="monthitem">
								<text class="month">{{i}}月</text>
								<view class="data">
									<text v-if="i == 1">{{item.months1}}</text>
									<text v-else-if="i == 2">{{item.months2}}</text>
									<text v-else-if="i == 3">{{item.months3}}</text>
									<text v-else-if="i == 4">{{item.months4}}</text>
									<text v-else-if="i == 5">{{item.months5}}</text>
									<text v-else-if="i == 6">{{item.months6}}</text>
									<text v-else-if="i == 7">{{item.months7}}</text>
									<text v-else-if="i == 8">{{item.months8}}</text>
									<text v-else-if="i == 9">{{item.months9}}</text>
									<text v-else-if="i == 10">{{item.months10}}</text>
									<text v-else-if="i == 11">{{item.months11}}</text>
									<text v-else-if="i == 12">{{item.months12}}</text>
								</view>
							</view>
						</view>

						<view class="total">
							<view class="circle" style="background: #6BA9FF;"></view>
							<text class="total_title">合计(m³)：</text>
							<text class="data" style="flex: 1;text-align: right;">{{item.yearcount}}</text>
						</view>
					</view>
				</view>
			</view>

		</z-paging>
		<suspended @userData="childData"></suspended>
	</view>
</template>

<script>
	import {
		GetYhList,
		GetSpbYHList
	} from '@/common/api.js';
	export default {
		data() {
			return {
				quarterArr: [{
					type: '无可选项',
					typeid: '1'
				}],
				quarterValue: '0',

				date: '年度',
				startDate: '1900',
				endDate: '2200',

				infoList: [],

				placeholder: '请选择',

				quarter: '',
				address: '',
				jsdm: uni.getStorageSync('username')
			}
		},


		methods: {

			quarterselectitem(index, item) {
				this.quarterValue = item.typeid
				this.quarter = item.type == '无可选项'? '' : item.type
				this.address = item.dwmc
				console.log(this.quarterValue);
				this.$refs.paging.reload();
			},

			bindDateChange(e) {
				console.log(e);
				this.date = e.target.value
				this.GetYhList()
				
				uni.showToast({
					title: '请选择所属区县！',
					icon: 'none'
				})
			},

			async queryList(pageNo, pageSize) {
				if (this.date == '年度') {
					uni.showToast({
						title: '请选择查询年份！',
						icon: 'none'
					})
					return
				}
				var data = {
					type: 3,
					nd: this.date,
					fgdm: this.quarterValue
				}
				let res = await GetSpbYHList(data);
				this.$refs.paging.complete(res.response.data);
			},

			async GetYhList() {
				var that = this
				that.quarterArr = [{
					type: '无可选项',
					typeid: '1'
				}]
				var data = {
					nd: this.date
				}
				let res = await GetYhList(data);
				let arr = res.response
				console.log('111111111',arr.length)
				if (arr.length > 0) {
					that.quarterArr = []
					arr.forEach((item, index) => {
						var quarter = {
							type: item.jx,
							typeid: item.fgdm,
							dwmc: item.dwmc
						}
						that.quarterArr.push(quarter)
					})
				}
			},
			
			childData(param) {
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f4f4f4;
	}

	.pageView {
		padding: 0 24rpx 0 24rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #f4f4f4;
	}

	.timebg {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.timetxt {
		width: 50%;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sanjiao {
		width: 20rpx;
		height: 14rpx;
		margin-left: 17rpx;
	}

	.select-lay {
		width: 60%;
		height: 100%;
		background: transparent;
	}

	.bg_view {
		height: auto;
		position: absolute;
		top: 24rpx;
		left: 48rpx;
		right: 48rpx;
	}

	.address {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 48rpx;
	}

	.circle {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: #FFFFFF;
	}

	.view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24rpx;
	}

	.view_title {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 37rpx;
		margin-left: 16rpx;
	}

	.view_data {
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 42rpx;
		flex: 1;
		text-align: right;
	}

	.view_list {
		height: auto;
		background: #FFFFFF;
		border-radius: 17rpx;
		margin: 24rpx;
		padding: 24rpx;
	}

	.itemtitle {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 48rpx;
	}

	.itemaddress {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		margin-top: 16rpx;
	}

	.monthlist {
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		justify-content: flex-start;
		align-content: space-between;
		margin-top: 19rpx;
	}

	.monthitem {
		width: 157rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 5rpx;
		margin: 5rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.month {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 37rpx;
	}

	.data {
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 37rpx;
		margin-top: 5rpx;
	}

	.total {
		height: 85rpx;
		background: #E0F7FF;
		border-radius: 16rpx;
		margin-top: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0rpx 24rpx 0 24rpx;
	}

	.total_title {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 37rpx;
		margin-left: 16rpx;
	}

	.plan_bg {
		width: 100%;
		height: 327rpx;
		background-image: url('@/static/plan_bg.png');
		background-size: 100% 100%;
	}
</style>
